<template>
  <div class="simple-carousel">
    <el-carousel 
      :interval="3000" 
      height="300px" 
      indicator-position="outside"
      arrow="hover"
    >
      <el-carousel-item v-for="(item, index) in items" :key="index">
        <div class="slide-content">
          <img 
            :src="item.image" 
            :alt="item.title"
            class="slide-image"
            @error="handleImageError(index)"
          >
          <div class="slide-caption">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 轮播图数据
const items = ref([
  {
    image: 'https://via.placeholder.com/800x300/ffd700/000000?text=轮播图1',
    title: '优质机械设备',
    description: '专业工程机械供应商'
  },
  {
    image: 'https://via.placeholder.com/800x300/e6a23c/ffffff?text=轮播图2',
    title: '特价促销活动',
    description: '限时优惠，不容错过'
  },
  {
    image: 'https://via.placeholder.com/800x300/409eff/ffffff?text=轮播图3',
    title: '专业售后服务',
    description: '24小时在线支持'
  }
])

// 图片加载失败处理
const handleImageError = (index) => {
  console.error(`第 ${index + 1} 张图片加载失败`)
  // 可以在这里设置默认图片
  // items.value[index].image = '默认图片路径'
}
</script>

<style scoped>
.simple-carousel {
  width: 1235px;
 text-align: center;
}

.slide-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
}

.slide-caption h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.slide-caption p {
  margin: 0;
  font-size: 14px;
}

/* 响应式调整 */
/* 桌面设备 (> 992px) */
@media (min-width: 993px) {
  .slide-caption {
    padding: 25px; /* 大屏幕更大的内边距 */
  }
  
  .slide-caption h3 {
    font-size: 20px; /* 大屏幕更大的字号 */
  }
  
  .slide-caption p {
    font-size: 16px;
  }
}
</style>